<template>
  <div  class="flex">
    <div class="chessboard" v-show="!isCanvas">
      <div v-for="(row, rowIndex) in state.board" :key="rowIndex" class="row">
        <div v-for="(col, colIndex) in row" :key="colIndex" class="col" @click="placePiece(rowIndex, colIndex)">
          <div class="piece" :class="{ black: col === 1, white: col === 2 }"></div>
        </div>
      </div>
    </div>
    <div class="btn-con">
      <h2 v-show="winner">{{ winner==1?'黑方胜':'白方胜' }}</h2>
      <button @click="$emit('toChange')">切换模式</button>
      <button @click="$emit('reStart')">重新开始</button>
      <button @click="undo">悔棋</button>
      <button @click="redo">撤销悔棋</button>
    </div>
  </div>
</template>
<script setup>
import { reactive, ref , onMounted} from "vue";
const state = reactive({
  board: [],// 棋盘，二维数组，0表示空，1表示黑色，2表示白色
  history: [] // 历史记录，数组中的每个元素为一个棋盘状态
})
let isCanvas = ref(true)
let historyIndex = ref(-1)
let winner = ref(null)
function drawByDom() {
  isCanvas.value = false
  state.board = new Array(15).fill(0).map(() => new Array(15).fill(0));
  console.log(state.board, 'board');
}
// 落子
function placePiece(row, col) {
  if(winner.value!==null){
    return false
  }
  if (state.board[row][col] !== 0) {
    return;
  }
  console.log(state.history,'state.his')
  historyIndex.value++;
  // 放置棋子
  state.board[row][col] = historyIndex.value % 2 === 0 ? 1 : 2
  // 添加当前状态到历史记录
  const newBoard = state.board.map(row => [...row]);
  state.history.push(newBoard);
  // 判断胜负
  const res = calculateWinner(state.board, row, col);
  if (res) {
    winner.value = res;
  } 
}
// 悔棋
function undo() {
  if (historyIndex.value > 0) {
    historyIndex.value--;
    state.board = state.history[historyIndex.value].map(row => [...row]);
    console.log(historyIndex.value,'historyIndex.value');
  }
}
// 撤销悔棋
function redo() {
  if (historyIndex.value < state.history.length - 1) {
    historyIndex.value++
    console.log(state.history,'state.history');
    console.log(state.history,'historyIndex.value');
    state.board = state.history[historyIndex.value].map(row => [...row]);
  }
}
//计算赢家
function calculateWinner(squares, x, y) {

  const size = squares.length;
  const piece = squares[x][y];
  const directions = [[0, 1], [1, 0], [1, 1], [1, -1]];

  for (let i = 0; i < directions.length; i++) {
    const [dx, dy] = directions[i];
    let count = 1;
    let nx = x + dx, ny = y + dy;

    while (nx >= 0 && nx < size && ny >= 0 && ny < size && squares[nx][ny] === piece) {
      count++;
      nx += dx;
      ny += dy;
    }

    nx = x - dx;
    ny = y - dy;

    while (nx >= 0 && nx < size && ny >= 0 && ny < size && squares[nx][ny] === piece) {
      count++;
      nx -= dx;
      ny -= dy;
    }

    if (count >= 5) {
      return piece;
    }
  }
  return null;
}
onMounted(()=>{
  drawByDom()
})


</script>
<style scoped>
#board {
  margin: 20px auto;
  background-color: #eeeed1;
  border: 1px solid black;
}

.chessboard {
  display: flex;
  flex-wrap: wrap;
  width: 450px;
  height: 450px;
  background-color: #f5c17d;
  border: 5px solid #6b4724;
}
.canvasboard{
  width: 450px;
  height: 450px;
}

.row {
  display: flex;
  width: 100%;
}

.col {
  flex: 1;
  border: 1px solid #6b4724;
  box-sizing: border-box;
}

.piece {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
.piece.black {
  background-color: #000;
}
.piece.white {
  background-color: #fff;
}
</style>